<template>
    <codemirror ref="codemirrorRef" v-model:value="innerValue" :options="editorOptions"
        @input="$emit('update:value', $event)"></codemirror>
</template>
<script setup>
import { ref, watch, nextTick } from 'vue';
import Codemirror from 'codemirror-editor-vue3';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/theme/material-darker.css'; // 引入 CodeMirror 主题

const codemirrorRef = ref(null);

// 在下一tick中执行指定的回调函数
nextTick(() => {
    // 刷新CodeMirror实例的视图
    codemirrorRef.value.refresh()
})

// 定义 props
const props = defineProps({
    value: String, // 用于 v-model 的值
    // options: Object // CodeMirror 的配置选项
});
// 定义 editorOptions
const editorOptions = {
    mode: 'javascript',
    theme: 'material-darker',
    foldGutter: true,
    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
    lineNumbers: true,
};
// 用于 v-model 的本地响应式值
const innerValue = ref(props.value);

// 监听 value 的变化，并同步更新 innerValue
watch(
    () => props.value,
    (newValue) => {
        console.log('value change');
        innerValue.value = newValue;
    }
);




</script>